Day12-Angular Material 介紹
Day13-Angular Material: Table
Day14-Angular Material: DatePicker 日期選擇器
Day15-Angular Material: Select 下拉選單
Day16-Angular Material: Checkbox

Angular Material-Dialog

這篇應該是 Angular Material 最後一篇

官方中文網站 - Dialog
Dialog 是模擬一個對話視窗的感覺。
像這樣：

建立一個 Dialog

1. 慣例的 imort module

   import { MatDialogModule } from "@angular/material";
   
   @NgModule({
     imports: [
       MatDialogModule,
     ],
   })
   

2. 新建一個 testDialog
   終端機 > ng g c test-dialog
   如果希望有個典型的 Material Design 外觀和感覺可以依照下面結構去設計 HTML：

   <!--test-dialog.component.html-->
   <mat-dialog-title>
     <!--標題-->
   </mat-dialog-title>
   
   <mat-dialog-content>
     <!--內容-->
   </mat-dialog-content>
   
   <mat-dialog-actions>
     <button class="mat-raised-button"(click)="onClose()">Close</button>
     <button class="mat-raised-button mat-primary"(click)="onSave()">Save</button>
   </mat-dialog-actions>
   

   // test-dialog.component.ts
   export class TestDialogComponent implements OnInit {
     constructor(
       private dialogRef: MatDialogRef<TestDialogComponent>,
       @Inject(MAT_DIALOG_DATA) data, //接收從父層傳送的資料
     ){}
     ngOnInit() {
       console.log(this.data.cat);   //打開 F12 主控台顯示: Bubble
     }
   
     /* 儲存 */
     onSave() {
       // 結束時 傳值回父層
       this.dialogRef.close(this.form.value);
     }
     /* 關閉 */
     onClose() {
       // 結束時 不傳任何東西
       this.dialogRef.close();
     }
   }
   

3. 回去父層 component 設定一個 button 用來打開 Dialog

   <!--XXX.component.html-->
   <button (click)="openDialog()">Open</button>
   

   // XXX.component.ts
   constructor(
     public _MatDialog: MatDialog
   ){}
   
   /* 打開對話方塊 */
   openDialog(){
     const dialogRef = this._MatDialog.open(TestDialogComponent, {
       data: { cat: "Bubble" }  // 傳值給 Dialog 
     });
     dialogRef.afterClosed().subscribe((res) => {// 當 dialog 結束時、接收傳回來的值
       if(res){
         console.log(res);
       }
     });
   }
   

MatDialogConfig 對話框配置選項

可以用以下兩種方式進行設定：

1. 創建實例 MatDialogConfig

   openDialog() {
     const dialogConfig = new MatDialogConfig();
     dialogConfig.disableClose = true;
     dialogConfig.autoFocus = true;
     this.dialog.open(CourseDialogComponent, dialogConfig);
    }
   

2. 直接包在裡面

   openDialog() {
     const dialogRef = this._MatDialog.open(TestDialogComponent, {
       disableClose: true,
       autoFocus: true
     });
    }
   

3. 配置屬性no表格

   選項	預設	說明
   data		傳值進去對話方塊
   hasBackdrop	true	是否應具有陰影背景，以防 User 在對話框開啟時還點到其他 UI 的部分
   panelClass		新增 自訂 CSS 類別清單、到對話方塊面板
   backdropClass		新增 自訂 CSS 類別清單、到對話方塊背景
   position		定義對話方塊的起始絕對位置
   direction	ltr	定義了對話框內的元素是左對齊(ltr)還是右對齊(rtl)
   closeOnNavigation	true	定義當我們導航到另一路由時、對話方塊是否應自動關閉
   width		寬度
   height		高度
   minWidth		最小寬度
   minHeight		最小高度
   maxWidth		最大寬度
   maxHeight		最大高度

參考來源

Angular Material Dialog: A Complete Example